import React, { Component } from 'react'
import { get } from 'lodash'
import { Card, Avatar } from 'components/Base'
import { Columns, Column } from '@kube-design/components'
import Table from 'components/Tables/Base'
import PlatformMonitorStore from 'stores/monitoring/platform'
import styles from './index.scss'

const MetricTypes2 = {
  cluster_count: 'kubesphere_cluser_count',
  workspace_count: 'kubesphere_workspace_count',
  account_count: 'kubesphere_user_count',
  app_template_count: 'kubesphere_app_template_count',
}
export default class ClusterOverview extends Component {
  monitorStore = new PlatformMonitorStore()

  constructor(props) {
    super(props)
    this.state = {
      groupListData: [
        {
          name: 'dl-workspace',
          des: '10',
          client: 0.018,
          runTime: 0.2,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'demo-workspace',
          des: '20',
          client: 0.5,
          runTime: 0.6,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'rb-workspace',
          des: '30',
          client: 0.7,
          runTime: 0.9,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'dl1-workspace',
          des: '31',
          client: 0.7,
          runTime: 0.9,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'dl2-workspace',
          des: '55',
          client: 0.7,
          runTime: 0.7,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'dl3-workspace',
          des: '56',
          client: 0.8,
          runTime: 0.8,
          cpu: '60%',
          memory: '8/24',
        },
        {
          name: 'dl4-workspace',
          des: '87',
          client: 0.7,
          runTime: 0.9,
          cpu: '60%',
          memory: '8/24',
        },
      ],
    }
  }

  get resources() {
    return [
      {
        icon: '/assets/userPlatform/1.png',
        name: '集群数量',
        link: '/access/workspaces',
        metric: 'kubesphere_cluser_count',
      },
      {
        icon: '/assets/userPlatform/2.png',
        name: '组织数量',
        link: '/access/workspaces',
        metric: 'kubesphere_workspace_count',
      },
      {
        icon: '/assets/userPlatform/3.png',
        name: '用户数量',
        link: '/access/accounts',
        metric: 'kubesphere_user_count',
      },
      {
        icon: '/assets/userPlatform/4.png',
        name: '服务器数量',
        link: '/apps',
        // metric: 'kubesphere_app_template_count',
        metric: 'kubesphere_app_template_serve',
      },
    ]
  }

  componentDidMount() {
    this.monitorStore.fetchMetrics({
      metrics: Object.values(MetricTypes2),
    })
  }

  get configs() {
    return [
      {
        type: 'kubesphere',
        count: '10',
        icon: '/assets/userPlatform/1.png',
        name: '集群数量',
      },
      {
        type: 'kubernetes',
        count: '10',
        icon: '/assets/userPlatform/2.png',
        name: '集群数量',
      },
      {
        type: 'istio',
        count: '10',
        icon: '/assets/userPlatform/3.png',
        name: '集群数量',
      },
      {
        type: 'monitoring',
        count: '10',
        icon: '/assets/userPlatform/4.png',
        name: '集群数量',
      },
    ]
  }

  getColumns = () => {
    return [
      {
        title: '组织名',
        dataIndex: 'name',
        render: v => {
          return (
            <>
              <img
                style={{
                  width: '30px',
                  height: '30px',
                  marginRight: '10px',
                }}
                src="/assets/new/row.png"
              />
              <span style={{ lineHeight: '30px', verticalAlign: 'top' }}>
                {v}
              </span>
            </>
          )
        },
      },
      {
        title: '项目数',
        dataIndex: 'des',
      },
      {
        title: '出站流量（M）',
        dataIndex: 'client',
      },
      {
        title: '进站流量（M）',
        dataIndex: 'runTime',
      },
      {
        title: 'CPU占用',
        dataIndex: 'cpu',
      },
      {
        title: '内存占用(GB)',
        dataIndex: 'memory',
      },
    ]
  }

  render() {
    return (
      <Card
        className={styles.groupContainer}
        title="集群概览"
        empty={t('NO_LOG_DATA_FOUND')}
      >
        <Columns>
          <Column className="is-narrow is-3">
            <Card className={styles.overviewContainer}>
              <div className={styles.level}>
                {this.resources.map(resource => {
                  return (
                    <div key={resource.name}>
                      <div className={styles.pngItem}>
                        <img src={resource.icon} />
                      </div>
                      <div>
                        {get(
                          this.monitorStore.data,
                          `${resource.metric}.data.result[0].value[1]`
                        )
                          ? get(
                              this.monitorStore.data,
                              `${resource.metric}.data.result[0].value[1]`
                            )
                          : 0}
                      </div>
                      <div>{resource.name}</div>
                    </div>
                  )
                })}
              </div>
            </Card>
          </Column>
          <Column className="is-narrow is-9">
            <Table
              className={styles.tableHeight}
              hideHeader
              hideFooter
              rowKey="name"
              data={this.state.groupListData}
              loading={false}
              columns={this.getColumns()}
            />
          </Column>
        </Columns>
      </Card>
    )
  }
}
